<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/utils/toastr.min.css" />
    <link rel="shortcut icon"  href="../img/login/logo2.png" type="image/x-icon">
	<title>未来脉络</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
		}
		.login-content {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: url(../img/login/body-back.png) no-repeat;
			background-size: 100% 100%;
	    	overflow: auto;
		}
		.company-logo {
			position: absolute;
			top: 30px;
			left: 40px;
			width: 290px;
			height: 60px;
			background: url(../img/login/wly-logo2.png) no-repeat;
			background-size: 100% 100%;
		}
		.company-phone {
			position: absolute;
			top: 50px;
			right: 40px;
			color: #fff;
		}
		.company-phone img {
			margin-right: 10px;
		}
		.company-phone span {
			vertical-align: middle;
		}
		.login-center {
			width: 1263px;
			margin: 0 auto;
			position: relative;
			top: calc(50% - 284px);
		}
		.login-ball {
			float: left;
			box-shadow: 30px 30px 20px #02275b;
		}
		.login-input {
			float: left;
			margin: 0 auto;
			margin-top: 58px;
			margin-left: 20px;
			width: 450px;
			height: 450px;
			background: url(../img/login/login-back.png) no-repeat;
			background-size: 100% 100%;
			box-shadow: 25px 25px 20px #02275b;
		}
		.login-logo {
			margin-top: 30px;
			text-align: center;
		}
		.login-logo img{
			width: 75px;
			height: 75px;
		}
		.login-info {
			width: 330px;
			margin: 20px auto;
		}
		.input-border {
			position: relative;
			margin-bottom: 20px;
			border-bottom: 1px solid #022250;
		}
		.input-border img {
			display: inline-block;
			margin-left: 20px;
			width: 14px;
		}
		.input-border input {
			display: inline-block;
			width: calc(100% - 40px);
			vertical-align: middle;
			background-color: transparent;
			border: none;
			box-shadow: none;
			color: #fff;
		}
		.validata-prompt {
			display: none;
			position: absolute;
			margin-top: 5px;
			margin-left: 20px;
			font-size: 12px;
			color: red;
		}
		.input-border input::-ms-input-placeholder {
			color: #dedede;
		}
		.input-border input::-webkit-input-placeholder {
			color: #dedede;
		}
		.input-border input:focus{
		    box-shadow: none;
		}
		.forgot-password {
			padding-right: 10px;
			text-align: right;
		}
		.forgot-password a {
			color: #11B5AB;
		}
		.login-button {
			margin-top: 40px;
		}
		.btn-theme {
			margin-bottom: 20px;
			background-color: #11B5AB;
		    color: #fff;
		    border-color: #11B5AB;
		}
		.btn-theme:focus, .btn-theme:hover {
			color: #fff;
			background-color: #2aeee2;
		}
		.btn-theme:focus {
			outline: none !important;
			outline-offset: 0 !important;
		}
		.btn-prompt {
			background-color: transparent;
			color: #11B5AB;
			border-color: #11B5AB;
		}
		.btn-prompt:focus, .btn-prompt:hover {
			color: #11B5AB;
			border-color: #11B5AB;
		}
		.company-info {
			display: none;
			width: 330px;
			margin: 0 auto;
			margin-top: 40px;
		}
		.company-info button {
			margin-bottom: 30px;
		}
		.user-agreement {
			text-align: center;
		}
		.user-agreement input[type='checkbox'] {
			margin-right: 10px;
			vertical-align: middle;
		}
		.user-agreement a {
			vertical-align: sub;
		}
		
		/*手机页面*/
		@media (max-width: 767px) { 
			.login-content {
				background: url(../img/login/phone-body-back.png) no-repeat;
				background-size: 100% 100%;
			}
			.company-logo {
				display: none;
			}
			.company-phone {
				top: 20px;
				right: 20px;
				font-size: 13px;
			}
			.company-phone img {
				width: 22px;
				height: 22px;
				margin-right: 5px;
			}
			.login-center {
				width: 100%;
				top: 15%;
				padding: 0 20px;
			}
			.login-ball {
				display: none;
			}	
			.login-input {
				width: 100%;
				height: 390px;
				margin-top: 0;
				margin-left: 0;
				padding: 0 35px;
			}
			.login-info {
				width: 100%;
			}
			.company-info {
				width: 100%;
			}
			.input-border img {
				margin-left: 18px;
			}
		}
	</style>
</head>
<body>
	<div class="login-content">
		<div class="company-logo"></div>
		<!--<div class="company-phone">
			<img src="../img/login/login-phone.png" /><span>400 6635 998‬</span>
		</div>-->
		<div class="login-center">
			<div class="login-ball">
				<img src="../img/login/login-ball.png" />
			</div>
			<div class="login-input">
				<div class="login-logo">
					<img src="../img/login/logo2.png" />
				</div>
				<div class="login-info">
					<div class="input-border">
						<img src="../img/login/user-name.png" />
						<input type="text" id="phone" class="form-control" placeholder="用户名(手机账户)">
						<div id="phoneValidata" class="validata-prompt"></div>
					</div>
					<div class="input-border">
						<img src="../img/login/user-password.png" />
						<input type="password" id="password" class="form-control required" placeholder="密码">
						<div id="passwordValidata" class="validata-prompt"></div>
					</div>
					<div class="forgot-password">
						<a href="myCenter/forgotPassword.html">忘记密码</a>
					</div>
					<div class="login-button">
						<button id="login" type="button" class="btn btn-theme btn-block" data-loading-text="登录中..." autocomplete="off">登&nbsp;&nbsp;录</button>
						<!--<button type="button" class="btn btn-prompt btn-block">申请体验</button>-->
					</div>
					<div class="user-agreement">
						<input type="checkbox" name="agreementCheck" checked="checked" /><a href="agreement/agreement.html">用户协议</a>
					</div>
				</div>
				<div class="company-info">
					<!--<button type="button" class="btn btn-prompt btn-block">北京好麦</button>
					<button type="button" class="btn btn-prompt btn-block">平昌凹凸</button>
					<button type="button" class="btn btn-prompt btn-block">威脉</button>-->
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/utils/toastr.min.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		$(function(){
			toastr.options = {
                "timeOut": 2000,
                "positionClass": "toast-bottom-right"
            };
		});
		
		$("#login").click(function(){
			var phone = $("#phone").val();
			var password = $("#password").val();
			if (!checkPhone(phone)) {
				$("#phoneValidata").text("账户格式不对").show();
				return;
			}
			if (password.length < 6) {
				$("#passwordValidata").text("密码不能低于6位").show();
				return;
			}
			if (!$("input[name='agreementCheck']").prop("checked")) {
				toastr.warning("请勾选复选框");
				return;
			}
			
			$(this).button('loading');
			$("#phoneValidata").hide();
			$("#passwordValidata").hide();
			base.postData(base.url.userLogin,{phone:phone,password:password},loginCallback);
		});
		$(document).keyup(function (e) {
		    if (e.keyCode == 13) {
		        $("#login").click();
		    }  
		});  
		function loginCallback(data){
			$("#login").button('reset');
			if (data.success) {
				$.cookie("userID", data.context.userID, {path:"/"});
				$.cookie("userName", data.context.userName);
				$.cookie("phone", $("#phone").val());
				$.cookie("isAdmin", data.context.isAdmin);
				$.cookie("roleType", data.context.roleType);
				if (data.context.companyList.length > 1) {
					var html = '';
					for (var i = 0; i < data.context.companyList.length; i++) {
						html += '<button type="button" class="btn btn-prompt btn-block" data-headImg="'+data.context.companyList[i].companyHeadUrl+'" data-open="'+data.context.companyList[i].companyID+'">'+data.context.companyList[i].companyName+'</button>';
					}
					$(".company-info").html(html);	
					$(".company-info").show();
					$(".login-info").hide();
				}else{
					$.cookie("companyID",data.context.companyList[0].companyID);
					$.cookie("companyName",data.context.companyList[0].companyName)
					$.cookie("companyHeadUrl", data.context.companyList[0].companyHeadUrl);
					window.location.href = "index.html";
				}
			}else{
				  toastr.warning(data.msg);
			}
		}
		$(".company-info").on("click", "button", function(){
			var companyID = $(this).attr("data-open");
			var companyHeadUrl = $(this).attr("data-headImg");
			$.cookie("companyID", companyID)
			$.cookie("companyHeadUrl", companyHeadUrl);
			window.location.href = "index.html";
		});
	</script>
</body>
</html>
